<script setup lang="ts">
import { tjzy } from "../index";
// import { reactive, ref } from "vue";
// import { countDeviceNum } from "@/api";
// import CountUp from "@/components/count-up";
// import {ElMessage} from "element-plus"

// const duration = ref(2);
// const state = reactive({
//   alarmNum: 0,
//   offlineNum: 0,
//   onlineNum: 0,
//   totalNum: 0,
// });


// const getData = () => {
//   countDeviceNum().then((res) => {
//     console.log("左上--设备总览",res);
//     if (res.success) {
//       state.alarmNum = res.data.alarmNum;
//       state.offlineNum = res.data.offlineNum;
//       state.onlineNum = res.data.onlineNum;
//       state.totalNum = res.data.totalNum;
//     }else{
//       ElMessage.error(res.msg)
//     }
//   }).catch(err=>{
//     ElMessage.error(err)
//   });;
// };
// getData();
</script>

<template>
  <ul class="user_Overview">
   
    <li class="user_Overview-item" style="color: #00fdfa">
      <div class="zzdwitem">组织情况</div>
      <div class="zzdwlist">
        <div style="display: flex;">
          <div class="zzdwlist_img" >
            <img src="../../../static/司法局.png" alt="">
          </div>
          <div style="margin-left: 10px;">
            <div>司法局</div>
            <div>{{tjzy.sfj}}个</div>
          </div>
        </div>
        <div style="display: flex;">
          <div class="zzdwlist_img">
            <img src="../../../static/师资队伍.png" alt="">
          </div>
          <div style="margin-left: 10px;">
            <div>司法所</div>
            <div>{{tjzy.sfs}}个</div>
          </div>
        </div>
        <div style="display: flex;">
          <div class="zzdwlist_img">
            <img src="../../../static/调解.png" alt="">
          </div>
          <div style="margin-left: 10px;">
            <div>调解组织</div>
            <div>{{tjzy.tjzz}}个</div>
          </div>
        </div>
       
      </div>
    </li>
    <li class="user_Overview-item" style="color: #00fdfa;display: flex;margin-top: 10px;">
      <div style="width: 50%;">
        <div>调解机构</div>
        <div class="twhlist">
          <div>村（社区）调委会</div>
          <div>{{tjzy.cjtwh}}个</div>
          </div>
        <div class="twhlist">
          <div>乡镇（街道）调委会</div>
          <div>{{tjzy.xjtwh}}个</div>
          </div>
        <div class="twhlist">
          <div>行专调委会</div>
          <div>{{tjzy.xztwh}}个</div>
          </div>
        <div class="twhlist">
          <div>企事业单位调委会</div>
          <div>{{tjzy.qsydwtwh}}个</div>
          </div>
      </div>
      <div style="width: 46%;margin-left: 10px;">
        <div>调解人员</div>
        <div style="display: flex;margin-top: 5px;">
          <div class="zzdwlist_img">
            <img src="../../../static/总数.png" alt="">
          </div>
          <div style="margin-left: 10px;">
            <div>调解员</div>
            <div>{{tjzy.zz+tjzy.jz}}个</div>
          </div>
        </div>
        <div class="twhlist" style="margin-top: 22px;">
          <div>专职调解人员</div>
          <div>{{tjzy.zz}}个</div>
          </div>
          <div class="twhlist">
          <div>兼职调解人员</div>
          <div>{{tjzy.jz}}个</div>
          </div>
      </div>
    </li>
    <!-- <li class="user_Overview-item" style="color: #07f7a8">
      <div class="user_Overview_nums online">
        <CountUp :endVal="state.onlineNum" :duration="duration" />
      </div>
      <p>在线数</p>
    </li>
    <li class="user_Overview-item" style="color: #e3b337">
      <div class="user_Overview_nums offline">
        <CountUp :endVal="state.offlineNum" :duration="duration" />
      </div>
      <p>掉线数</p>
    </li>
    <li class="user_Overview-item" style="color: #f5023d">
      <div class="user_Overview_nums laramnum">
        <CountUp :endVal="state.alarmNum" :duration="duration" />
      </div>
      <p>告警次数</p>
    </li>  -->
  </ul>
</template>

<style scoped lang="scss">
.twhlist{
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  padding: 6px;
  background-color: rgb(9, 43, 43);
  font-size: 12px;
  
}
.zzdwlist_img{
  border: 1px solid rgb(50, 143, 143);
  height: 46px;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:2px 0px 8px 4px rgba(82, 198, 233, 0.5);
  img{
    height: 30px;
    width: 30px;
  }
}
.zzdwlist{
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.user_Overview-item{
  position: relative;
}
.zzdwitem::before{
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 10px;
  border-radius: 6px;
  background-color: rgb(90, 210, 231);
  left: 5px;
}
.zzdwitem::after{
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 10px;
  border-radius: 6px;
  background-color: rgb(90, 210, 231);
  left: 85px;
}
.zzdwitem{
  width: 100%;
  padding-left: 15px;
}
.left-top {
  width: 100%;
  height: 100%;
}

.user_Overview {
  li {
    p {
      text-align: center;
      height: 16px;
      font-size: 16px;
    }

    .user_Overview_nums {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 22px;
      margin: 50px auto 30px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      &::before {
        background-image: url("@/assets/img/left_top_lan.png");
      }
    }

    .online {
      &::before {
        background-image: url("@/assets/img/left_top_lv.png");
      }
    }

    .offline {
      &::before {
        background-image: url("@/assets/img/left_top_huang.png");
      }
    }

    .laramnum {
      &::before {
        background-image: url("@/assets/img/left_top_hong.png");
      }
    }
  }
}
</style>
